<template>
	<view class="dis-pay">
		<view class="pay-select" @click="onActive">
			<view class="select-item" :id="0">
				<text class="iconfont" style="color: #51B1F7" :id="0">&#xe60a;</text>
				<text class="pay-pattern" :id="0">支付宝支付</text>
				<text :class="['iconfont','gou',currentId == 0 ? 'gou-active' : 'gou1']" :id="0">&#xe63b;</text>

			</view>
			<view class="select-item" :id="1">
				<text class="iconfont" style="color: #5bb63a" :id="1">&#xe634;</text>
				<text class="pay-pattern" :id="1">微信支付</text>
				<text :class="['iconfont','gou',currentId == 1 ? 'gou-active' : 'gou1']" :id="1">&#xe63b;</text>
			</view>

		</view>
		<button type="primary" @click="pay" class="pay-button margintop170" :disabled="payFlag">支付：{{ $format(payDatas.price) }}元</button>
		<button type="primary" class="pay-button zftime marginTop20" v-if="timeFlag">
			剩余可支付时间 <text class="iconfont">&#xe62b;</text>
			<text>{{payTime}}</text>
		</button>
		<button class="pay-button zftime marginTop20" v-else>
			支付时间已过，需重新付款
		</button>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				key: "value",
				currentId: '0',
				// pay_type: 1, // 支付方式 1支付宝 2微信
				payFlag: false,
				// 界面显示的支付时间
				payTime: '',
				payid: '',
				payDatas: {},
				intervalId: '', // 定时器
				timeFlag: true, // 最底部显示哪一个判断
			}
		},
		onLoad(option) {
			this.payDatas = JSON.parse(option.option);
			console.log(this.payDatas)
			this.payDatas.pay_type = 2
			let id = 2
			uni.setStorageSync('user-orderId', id);
		},
		computed: {
			...mapState(['payData']),
			...mapGetters(['totalPrice']),
		},
		methods: {

			async pay() { // 支付
				let res = await this.$http.unpaidOrderPay({
					action: "unpaid_order",
					order_id: this.payDatas.order_id,
					pay_type:this.payDatas.pay_type
				})

				uni.requestPayment({
					provider: 'alipay',
					orderInfo: res.data.orderInfo, //微信、支付宝订单数据 -- 后台返回
					success: (res) => {
						console.log('success:' + JSON.stringify(res));
						clearInterval(this.intervalId);
						this.payFlag = true;
						uni.navigateTo({
							url: '/pages/discountMall/finishPay'
						})
					},
					fail: (err) => {
						console.log('fail:' + JSON.stringify(err));
						clearInterval(this.intervalId);
						uni.showToast({
							title: '中途取消',
							icon: 'none'
						})
					}
				});
			},

			// 路由跳转
			async navTo(url) {
				if (this.currentId == 0) { // 支付宝支付
					let payInfo = {
						pay_type: 'alipay',
						payid: this.payid, //先填1
					}
					let a = await this.$http.pay(payInfo);
					let orderInfo = a.data.orderInfo;

					return
				}
			},

			// 支付方式选择
			onActive(e) {
				this.currentId = e.target.id;
				if (e.target.id == 0) {
					// this.pay_type = 1;
					this.payDatas.pay_type = 2;
					return
				}
				this.payDatas.pay_type = 1;
				// this.pay_type = 2;
			},
			// 倒计时
			countDown(minute) {
				let second = minute * 1800
				this.intervalId = setInterval(() => {
					second--
					this.payTime = this.s_to_hs(second)
					if (second <= 0) {
						clearInterval(this.intervalId);
						this.timeFlag = false;
						// uni.showToast({
						// 	title: '已过支付时间，请重新选择',
						// })
						// 让支付按钮不可用
						this.payFlag = true
					}
				}, 1000)



			},
			// 处理时间
			s_to_hs(s) {
				//计算分钟
				//算法：将秒数除以60，然后下舍入，既得到分钟数
				var h;
				h = Math.floor(s / 60);
				//计算秒
				//算法：取得秒%60的余数，既得到秒数
				s = s % 60;
				//将变量转换为字符串
				h += '';
				s += '';
				//如果只有一位数，前面增加一个0
				h = (h.length == 1) ? '0' + h : h;
				s = (s.length == 1) ? '0' + s : s;
				return h + ':' + s;
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/smallCommon.scss'
</style>
